<template>
    <view class="content">
        <a-demo title="基础使用">
            <pure-field>
                <pure-input placeholder="请输入地址" v-model="address"></pure-input>
            </pure-field>
        </a-demo>

        <a-demo title="左侧图标">
            <pure-field leftIcon="__weizhi">
                <pure-input placeholder="请输入地址" v-model="address"></pure-input>
            </pure-field>
        </a-demo>

        <a-demo title="左侧标签">
            <pure-field leftIcon="__weizhi" label="地址">
                <pure-input placeholder="请输入地址" v-model="address"></pure-input>
            </pure-field>
        </a-demo>

        <a-demo title="固定左侧内容宽度">
            <pure-form class="fixed-left">
                <pure-field leftIcon="__wode" label="姓名" class="pure-field-border-bottom">
                    <pure-input placeholder="请输入姓名" v-model="name"></pure-input>
                </pure-field>
                <pure-field leftIcon="__weizhi" label="地址">
                    <pure-input placeholder="请输入地址" v-model="address"></pure-input>
                </pure-field>
            </pure-form>
        </a-demo>

        <a-demo title="右侧图标">
            <pure-form class="fixed-left">
                <pure-field leftIcon="__weizhi" label="地址" rightIcon="__you2" class="pure-field-border-bottom">
                    <pure-input placeholder="请输入地址" v-model="address"></pure-input>
                </pure-field>
                <pure-field leftIcon="__weizhi" label="旋转角度" rightIcon="__you2" class="pure-field-border-bottom" :rotate="rotate" @onClick="handleRoteteFieldClick">
                    <pure-input placeholder="请输入地址" v-model="address"></pure-input>
                </pure-field>
            </pure-form>
        </a-demo>

        <a-demo title="必填符号">
            <pure-form class="fixed-left">
                <pure-field leftIcon="__weizhi" label="地址" rightIcon="__you2" required class="pure-field-required-left">
                    <pure-input placeholder="请输入地址" v-model="address"></pure-input>
                </pure-field>
                <pure-field leftIcon="__weizhi" label="地址" rightIcon="__you2" required class="pure-field-required-middle pure-field-border-top">
                    <pure-input placeholder="请输入地址" v-model="address"></pure-input>
                </pure-field>
                <pure-field leftIcon="__weizhi" label="地址" rightIcon="__you2" required class="pure-field-required-right pure-field-border-top">
                    <pure-input placeholder="请输入地址" v-model="address"></pure-input>
                </pure-field>
            </pure-form>
            <a-gap></a-gap>
            <pure-form class="fixed-left-larger pure-field-required-center pure-field-required-smaller" requiredText="(必填)">
                <pure-field leftIcon="__weizhi" label="地址" rightIcon="__you2" required class="pure-field-required-left">
                    <pure-input placeholder="请输入地址" v-model="address"></pure-input>
                </pure-field>
                <pure-field leftIcon="__weizhi" label="地址" rightIcon="__you2" required class="pure-field-required-middle pure-field-border-top">
                    <pure-input placeholder="请输入地址" v-model="address"></pure-input>
                </pure-field>
                <pure-field leftIcon="__weizhi" label="地址" rightIcon="__you2" required class="pure-field-required-right pure-field-border-top">
                    <pure-input placeholder="请输入地址" v-model="address"></pure-input>
                </pure-field>
            </pure-form>
        </a-demo>

        <a-demo title="错误提示">
            <pure-form class="fixed-left">
                <pure-field leftIcon="__weizhi" label="地址" rightIcon="__you2" tips="我是错误提示：请输入地址">
                    <pure-input placeholder="请输入地址"></pure-input>
                </pure-field>
                <pure-field leftIcon="__weizhi" label="提示贴边" rightIcon="__you2" tips="我是错误提示：请输入地址" class="pure-field-tips-edge">
                    <pure-input placeholder="请输入地址"></pure-input>
                </pure-field>
            </pure-form>
        </a-demo>

        <a-demo title="前/后插槽">
            <pure-form class="fixed-left">
                <pure-field leftIcon="__weizhi" label="地址" rightIcon="__you2">
                    <template #before>
                        <text>😀😀</text>
                    </template>
                    <pure-input placeholder="请输入地址" v-model="address"></pure-input>
                </pure-field>
                <pure-field leftIcon="__daohang_2" label="验证码" rightIcon="__you2" class="pure-field-border-top">
                    <pure-input placeholder="请填写验证码" v-model="smsCode"></pure-input>
                    <template #after>
                        <pure-button class="pure-button-primary" text="发送验证码"></pure-button>
                    </template>
                </pure-field>
            </pure-form>
        </a-demo>

        <a-demo title="只读状态" desc="仍然会触发点击事件">
            <pure-field leftIcon="__weizhi" label="地址" rightIcon="__you2" readonly @onClick="handleClick" class="fixed-left">
                <template #before>
                    <text>😀😀</text>
                </template>
                <pure-input placeholder="请输入地址" v-model="address"></pure-input>
            </pure-field>
        </a-demo>

        <a-demo title="禁用状态" desc="不会触发点击事件">
            <pure-field leftIcon="__daohang_2" label="验证码" rightIcon="__you2" borderTop class="fixed-left" disabled>
                <pure-input placeholder="请填写验证码" v-model="smsCode"></pure-input>
                <template #after>
                    <pure-button class="pure-button-primary" text="发送验证码"></pure-button>
                </template>
            </pure-field>
        </a-demo>

        <a-demo title="文本对齐方式">
            <pure-form class="fixed-left-bigger">
                <pure-field leftIcon="__weizhi" label="默认左对齐" rightIcon="__you2" tips="我是错误提示：请输入地址" class="pure-field-text-align-left">
                    <pure-input placeholder="请输入地址"></pure-input>
                </pure-field>
                <pure-field
                    leftIcon="__weizhi"
                    label="右对齐"
                    rightIcon="__you2"
                    tips="我是错误提示：请输入地址"
                    class="pure-field-text-align-right pure-field-border-top"
                >
                    <pure-input placeholder="请输入地址"></pure-input>
                </pure-field>
                <pure-field
                    leftIcon="__weizhi"
                    label="居中对齐"
                    rightIcon="__you2"
                    tips="我是错误提示：请输入地址"
                    class="pure-field-text-align-center pure-field-border-top"
                >
                    <pure-input placeholder="请输入地址"></pure-input>
                </pure-field>
            </pure-form>

            <a-gap></a-gap>

            <pure-form class="fixed-left-bigger">
                <pure-field leftIcon="__weizhi" label="内容左对齐" rightIcon="__you2" tips="我是错误提示：请输入地址" class="pure-field-content-text-align-left">
                    <pure-input placeholder="请输入地址"></pure-input>
                </pure-field>
                <pure-field
                    leftIcon="__weizhi"
                    label="内容右对齐"
                    rightIcon="__you2"
                    tips="我是错误提示：请输入地址"
                    class="pure-field-content-text-align-right pure-field-border-top"
                >
                    <pure-input placeholder="请输入地址"></pure-input>
                </pure-field>
                <pure-field
                    leftIcon="__weizhi"
                    label="内容居中对齐"
                    rightIcon="__you2"
                    tips="我是错误提示：请输入地址"
                    class="pure-field-content-text-align-center pure-field-border-top"
                >
                    <pure-input placeholder="请输入地址"></pure-input>
                </pure-field>
            </pure-form>

            <a-gap></a-gap>

            <pure-form class="fixed-left-bigger">
                <pure-field leftIcon="__weizhi" label="提示左对齐" rightIcon="__you2" tips="我是错误提示：请输入地址" class="pure-field-tips-text-align-left">
                    <pure-input placeholder="请输入地址"></pure-input>
                </pure-field>
                <pure-field
                    leftIcon="__weizhi"
                    label="提示右对齐"
                    rightIcon="__you2"
                    tips="我是错误提示：请输入地址"
                    class="pure-field-tips-text-align-right pure-field-border-top"
                >
                    <pure-input placeholder="请输入地址"></pure-input>
                </pure-field>
                <pure-field
                    leftIcon="__weizhi"
                    label="提示居中对齐"
                    rightIcon="__you2"
                    tips="我是错误提示：请输入地址"
                    class="pure-field-tips-text-align-center pure-field-border-top"
                >
                    <pure-input placeholder="请输入地址"></pure-input>
                </pure-field>
            </pure-form>

            <a-gap></a-gap>

            <pure-form class="fixed-left-bigger">
                <pure-field
                    leftIcon="__weizhi"
                    label="提示左贴边"
                    rightIcon="__you2"
                    tips="我是错误提示：请输入地址"
                    class="pure-field-tips-text-align-left pure-field-tips-edge"
                >
                    <pure-input placeholder="请输入地址"></pure-input>
                </pure-field>
                <pure-field
                    leftIcon="__weizhi"
                    label="提示右贴边"
                    rightIcon="__you2"
                    tips="我是错误提示：请输入地址"
                    class="pure-field-tips-text-align-right pure-field-border-top pure-field-tips-edge"
                >
                    <pure-input placeholder="请输入地址"></pure-input>
                </pure-field>
            </pure-form>
        </a-demo>

        <a-demo title="垂直布局">
            <pure-form class="pure-field-vertical">
                <pure-field leftIcon="__weizhi" label="地址" rightIcon="__you2">
                    <pure-input placeholder="请输入地址" v-model="address"></pure-input>
                </pure-field>
                <pure-field leftIcon="__weizhi" label="地址" rightIcon="__you2" tips="我是错误提示：请输入地址" class="pure-field-border-top">
                    <pure-input placeholder="请输入地址"></pure-input>
                </pure-field>
                <pure-field
                    leftIcon="__weizhi"
                    label="地址"
                    rightIcon="__you2"
                    tips="我是错误提示：请输入地址"
                    class="pure-field-border-top pure-field-text-align-right"
                >
                    <pure-input placeholder="请输入地址"></pure-input>
                </pure-field>
            </pure-form>
        </a-demo>

        <a-demo title="对齐方式">
            <pure-form class="fixed-left-larger">
                <pure-field leftIcon="__weizhi" label="默认居中对齐" rightIcon="__you2" tips="我是错误提示：请输入地址">
                    <view class="height-input">
                        <pure-input placeholder="请输入地址"></pure-input>
                    </view>
                </pure-field>
                <pure-field
                    leftIcon="__weizhi"
                    label="整体顶对齐"
                    rightIcon="__you2"
                    tips="我是错误提示：请输入地址"
                    class="pure-filed-align-top pure-field-border-top"
                >
                    <view class="height-input">
                        <pure-input placeholder="请输入地址"></pure-input>
                    </view>
                </pure-field>
                <pure-field
                    leftIcon="__weizhi"
                    label="整体底对齐"
                    rightIcon="__you2"
                    tips="我是错误提示：请输入地址"
                    class="pure-filed-align-bottom pure-field-border-top"
                >
                    <view class="height-input">
                        <pure-input placeholder="请输入地址"></pure-input>
                    </view>
                </pure-field>
                <pure-field
                    leftIcon="__weizhi"
                    label="左侧顶对齐"
                    rightIcon="__you2"
                    tips="我是错误提示：请输入地址"
                    class="pure-filed-align-left-top pure-field-border-top"
                >
                    <view class="height-input">
                        <pure-input placeholder="请输入地址"></pure-input>
                    </view>
                </pure-field>
                <pure-field
                    leftIcon="__weizhi"
                    label="左侧底对齐"
                    rightIcon="__you2"
                    tips="我是错误提示：请输入地址"
                    class="pure-filed-align-left-bottom pure-field-border-top"
                >
                    <view class="height-input">
                        <pure-input placeholder="请输入地址"></pure-input>
                    </view>
                </pure-field>
            </pure-form>
        </a-demo>
    </view>
</template>

<script setup>
    import { ref } from "vue";

    // 数据
    const name = ref("陈老师儿~");
    const address = ref("山东省济南市槐荫区");
    const smsCode = ref("");
    const rotate = ref(90);

    // 点击事件
    function handleClick() {
        uni.showToast({
            title: "点击了",
            icon: "none",
        });
    }

    // 旋转
    function handleRoteteFieldClick() {
        if (rotate.value === 90) rotate.value = 0;
        else rotate.value = 90;
    }
</script>

<style scoped>
    /* 固定左侧内容宽度 */
    .fixed-left {
        --pure-field-left-width: 90px;
    }

    .fixed-left-larger {
        --pure-field-left-width: 120px;
    }

    .fixed-left-bigger {
        --pure-field-left-width: 150px;
    }

    .height-input {
        height: 60px;
        background: #f0f0f0;
        padding: 15px;
        border-radius: 5px;
        box-sizing: border-box;
    }
</style>
